<template>
    <div class="select-option">
        <div class="select-options">
            <a 
            class="option"
            v-for="(item, index) in optList"
            :key="item.id"
            :class="actOpt === item.id ? 'active' : ''"
            @click="selectOpt(item.id, index)"
            v-html="item.name"
            >
            </a>
        </div>
        <div 
        class="line"
        :style="{left: `${lineTopLeft * 33.33}%`}"
        ></div>
    </div>
</template>

<script>
export default {
    name: 'SelectOption',
    props: {
        optList: { // 选项列表
            type: Array,
            default: []
        },
        actOpt: { // 默认选项
            type: String,
            default: ''
        }
    },
    methods: {
        selectOpt(id, index) {
            this.$emit('clickSelect', id)
        }
    },
    computed: {
        lineTopLeft() {
            for (let index = 0; index < this.optList.length; index++) {
                if (this.optList[index].id === this.actOpt) {
                    return index
                    break
                }
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.select-option {
    height: 40px;
    width: 100%;
    position: relative;
    border-bottom: 1px solid #e9e9e9;

    .line {
        height: 1px;
        width: 33.33%;
        position: absolute;
        left: 0;
        bottom: 0px;
        background: #0077bf;
        transition: left .4s;
    }

    .select-options {
        height: 100%;
        width: 100%;
        display: flex;

        .option {
            width: 33.3333%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #333333;
            // font-size: 12px;
        }

        .active {
            color: #0077bf;
            font-weight: bold;
        }
    }
}
</style>

<style lang="scss">
.statistics-opt {
    font-size: 12px;
    position: relative;
    top: 1px;
}
</style>